<script lang="ts" setup>
    import { reactive } from "vue";

    const data = reactive({
        'list1': [
            {'text':'了解更多产品相关信息请详阅GPDB最新文档'},
            {'text':'加入GPDB开发者邮箱组'},
            {'text':'向安全团队提交相关问题'}
        ],
        'list2': [
            {'text':'加入GPDB用户邮件组'},
            {'text':'加入Slack 上 GPDB频道的讨论'},
            {'text':'微信上添加“gp_assistant_2”加入技术讨论群'}
        ]
    })
</script>
<template>
    <div class="session">
        <div class="e-con-inner d-flex">
            <div class="empty"></div>
            <div class="content">
                <div class="border-bottom title">开发者社区</div>
                <div class="text" v-for="item in data.list1">{{ item.text }}</div>
            </div>
            <div class="content">
                <div class="border-bottom title">联系我们</div>
                <div class="text" v-for="item in data.list2">{{ item.text }}</div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .session {
        background-color: #F5FAED;
    }
    .e-con-inner {
        padding: 56px 0px;
        margin: 0px 74.5px;
    }
    .empty {
        width: 30%;
    }
    .content {
        width: 40%;
    }
    .title {
        line-height: 32px;
        font-size: 20px;
        font-weight: 400;
        padding-bottom: 32px;
    }
    .text {
        padding: 12px 0px;
        font-size: 16px;
        font-weight: 400;
        line-height: 28px;
    }
</style>